<template>
  <div class="category-panel">
    <navigator
      class="category-item"
      url="/pages/index/index"
      open-type="navigate"
      hover-class="navigator-hover"
      v-for="(item, index) in 10"
      :key="index"
    >
      <img class="icon" src="@/static/categoryicon/1.png" alt="" />
      <text>居家</text>
    </navigator>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.category-panel {
  width: 100%;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(5, auto);
  padding: 20rpx 0rpx;
  min-height: 328rpx;
  .category-item {
    width: 150rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // text-align: center;
    .icon {
      width: 100rpx;
      height: 100rpx;
      border-radius: 25%;
      background-color: white;
      box-shadow: 10rpx 10rpx 10rpx 0 #888888;
    }
  }
}
</style>
